<template>
  <div class="errDev-list">
<!--    <div v-if="flowError" class="errDev-box">
      当前地址
      <span class="red">流量不足</span>
    </div>-->
    <div
      class="errDev-box"
      v-for="item in devList"
      :key="item.devId"
      @click="control(item)"
    >
      {{item.devName}}
      <span
        :class="getStateCss(item)"
        v-text="getState(item)"
      ></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'errDev',
  props: ['devList'],
  methods: {
    getState: function (item) {
      if (item.status === 'OL') {
        return '设备离线'
      } else if (item.status === 'L') {
        return '连接过多'
      } else if (item.status === 'S') {
        return '信号异常'
      } else if (item.status === 'N') {
        return '设备正常'
      } else if (item.status === 'F') {
        return '流量不足'
      }
    },
    getStateCss: function (item) {
      if (item.status === 'OL') {
        return 'gray' // 设备离线
      } else if (item.status === 'L') {
        return 'blue' // 连接数异常
      } else if (item.status === 'S') {
        return 'yellow' // 信号异常
      } else if (item.status === 'N') {
        return 'green' // 正常
      } else if (item.status === 'F') {
        return 'red' // 流量不足
      }
    },
    control: function (item) {
      let type = this.getStateCss(item)
      if (type !== 'green') {
        this.$router.push({path: '/errorDetail/' + type})
      }
    }
  }
}
</script>

<style scoped>
  .errDev-list{
    background-color: #fff;
    min-height: 0.92rem;
  }
  .errDev-box{
    border-bottom: solid 1px #ebebeb;
    height: 0.92rem;
    padding-left: 0.46rem;
    padding-right: 0.46rem;
    font-size: 0.36rem;
    line-height: 0.92rem;
  }
  .errDev-box span{
    font-size: 0.3rem;
    line-height: 0.92rem;
    float: right;
  }
  .green{
    color: #3cd35f;
  }
  .red {
    color: #f73e3e
  }
  .gray {
    color: gray;
  }
  .yellow {
    color: #f73e3e;
  }
  .blue {
    color: #f73e3e;
  }
</style>
